<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2023-04-07 12:37:01
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-05-04 14:41:06
 * @FilePath: \mould\src\components\pitchManage\b.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <!-- show-overflow-tooltip属性，表格列单行显示，多出隐藏，鼠标放上去tootip显示 -->
    <el-table-column :label="myCol.label" :label-class-name="myCol.isGroup" :prop="myCol.prop" :width="myCol.width"
        :max-height="myCol.height" show-overflow-tooltip align="center">
        <!-- 非多级表头 -->
        <template slot-scope="scope">
            <!-- 非render列 -->
            <template v-if="!myCol.render">
                <!-- 列formatter -->
                <template v-if="myCol.formatter">
                    <span v-html="myCol.formatter(scope.row, myCol)" />
                </template>
                <!-- 普通列 -->
                <template v-else>
                    {{ scope.row[myCol.prop] }}
                </template>
            </template>
            <!-- render列 -->
            <template v-else>
                <MyRenderDom :column="myCol" :row="scope.row" :render="myCol.render" :index="scope.$index" />
            </template>
        </template>
        <!-- 多级表头 -->
        <template v-for="(its, i) in myCol.columns">

            <MyColumn v-if="myCol.columns" :key="i" :myCol="its"> </MyColumn>
            <el-table-column v-else :key="i">
            </el-table-column>
        </template>
    </el-table-column>
</template>
     
<script>
export default {
    name: 'MyColumn',
    components: {
        MyRenderDom: {//函数式组件
            functional: true,//设置为true 即表示该组件为一个函数组件
            props: {
                row: Object,
                render: Function,
                index: Number,
                column: {
                    type: Object,
                    default: null
                }
            },
            render: (h, ctx) => {
                const params = {
                    row: ctx.props.row,
                    index: ctx.props.index
                }
                if (ctx.props.column) params.column = ctx.props.column
                return ctx.props.render(h, params)
            }
        },
    },
    props: {
        myCol: {
            type: Object
        },
        mutiSelect: {
            type: Boolean,
            default: () => {
                return false
            }
        }
    },
    data() {
        return {

        }
    },
    created() {
    },
    methods: {

    }
}
</script>
  